<template>
  <div class="container">
    <div class="home" v-if="pageType === 'home'">
      <div class="content">
        <div class="title">{{ $t('stm.branchTransReportList.orgno') }}</div>
        <div class="date">
          <div class="label">报告期：</div>
          <bfe-date-picker v-model="date" type="month" size="small" :editable="true" style="width: 340px; height: 42px"
            :placeholder="$t('stm.branchTransReportList.time')" format />
        </div>
        <div class="orgno">
          <div class="label">机构号：</div>
          <bfe-input v-model="orgNo" :disabled="noEnter" size="small" type="input" :maxlength="5"
            style="width: 340px; height: 42px" :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
        </div>
        <div class="footer">
          <bfe-button type="primary" @click="doOrgAdd">{{ $t('stm.branchTransReportList.add') }}</bfe-button>
          <bfe-button @click="doOrgEdit">{{ $t('stm.branchTransReportList.edit') }}</bfe-button>
          <bfe-button @click="doOrgView">{{ $t('stm.branchTransReportList.detail') }}</bfe-button>
        </div>
      </div>
    </div>
    <Org v-if="pageType === 'org'" :type="type" :date="formattedDate" :handlePageType="handlePageType" :headId="headId"
      :reqOrgNo="reqOrgNo" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import mixin from "@/views/business/stm/mixins";
import moment from "moment";
import Org from "./org";

export default {
  mixins: [mixin],
  components: {
    Org,
  },
  data() {
    return {
      date: "",
      pageType: "home",
      type: "",
      headId: null,
      orgNo: null,
    };
  },
  computed: {
    ...mapState({
      language: (state) => state.base.language,
      userInfo: (state) => state.base.userInfo,
    }),
    formattedDate() {
      return this.date ? moment(this.date).format("YYYY-MM") : "";
    },
    noEnter() {
      return !['A0001', '00001'].includes(this.userInfo.userAhrOrg)
    },
    reqOrgNo() {
      if (this.type === 'view') {
        return this.orgNo ? this.orgNo : this.userInfo.userAhrOrg
      } else {
        return this.userInfo.userAhrOrg
      }
    }
  },
  methods: {
    // 机构
    doOrgAdd() {
      if (!this.date) return this.$message.error(this.$t('stm.branchTransReportList.date'));
      // 查询当月是否有报告
      const params = {
        optCode: "STM002GET1801",
        payload: {
          rptOrgNo: this.userInfo.userAhrOrg || "",
          rptpd: this.date ? moment(this.date).format("YYYY-MM") : "",
          areaFlg: 'out'
        },
      };
      this.$p2svr(
        this.$api["_01_TSTM02MONRPT1800"],
        "RequestPoAuth",
        params
      ).then((res) => {
        if (res.payload && res.payload.id) {
          this.$message.error(this.$t('stm.branchTransReportList.addTips'));
        } else {
          this.pageType = "org";
          this.type = "add";
        }
      });
    },
    doOrgEdit() {
      if (!this.date) return this.$message.error(this.$t('stm.branchTransReportList.date'));
      // 查询当月是否有报告
      const params = {
        optCode: "STM002GET1801",
        payload: {
          rptOrgNo: this.userInfo.userAhrOrg || "",
          rptpd: this.date ? moment(this.date).format("YYYY-MM") : "",
          areaFlg: 'out'
        },
      };
      this.$p2svr(
        this.$api["_01_TSTM02MONRPT1800"],
        "RequestPoAuth",
        params
      ).then((res) => {
        if (res.payload && res.payload.id) {
          this.headId = res.payload.id;
          this.pageType = "org";
          this.type = "edit";
        } else {
          this.$message.error(this.$t('stm.branchTransReportList.viewTips'));
        }
      });
    },
    doOrgView() {
      if (!this.date) return this.$message.error(this.$t('stm.branchTransReportList.date'));
      if (this.orgNo) {
        const reg = /^[a-zA-Z0-9]{5}$/
        if (!reg.test(this.orgNo)) return this.$message.error("请输入不超过5位的数字或者字母组合");
      }
      // 查询当月是否有报告
      const params = {
        optCode: "STM002GET1801",
        payload: {
          rptOrgNo: this.orgNo || this.userInfo.userAhrOrg,
          rptpd: this.date ? moment(this.date).format("YYYY-MM") : "",
          areaFlg: 'out'
        },
      };
      this.$p2svr(
        this.$api["_01_TSTM02MONRPT1800"],
        "RequestPoAuth",
        params
      ).then((res) => {
        if (res.payload && res.payload.id) {
          this.headId = res.payload.id;
          this.pageType = "org";
          this.type = "view";
        } else {
          this.$message.error(this.$t('stm.branchTransReportList.viewTips'));
        }
      });
    },
    handlePageType(type) {
      this.pageType = type;
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
}

.home {
  width: 100%;
  height: 100%;
  background: url("~@/assets/stm/branchTrans.jpg");
  background-size: 100% 100%;
  padding-top: 227px;
  padding-left: 58px;
}

.content {
  .title {
    font-size: 52px;
    color: #000000;
    margin-bottom: 34px;
  }

  .date {

    .label {
      display: inline-block;
      width: 88px;
      text-align: right;
    }

    .label::before {
      display: inline-block;
      margin-right: 2px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: "*";
    }
  }

  .orgno {
    margin: 12px 0;

    .label {
      display: inline-block;
      width: 88px;
      text-align: right;
    }
  }

  .footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;

    /deep/ .giop-button {
      width: 120px;
      height: 42px;
      border-radius: 4px;
    }

    /deep/ .giop-button--primary {
      font-size: 16px;
      color: #ffffff;
    }

    /deep/ .giop-button--default {
      font-size: 16px;
      color: #000000;
      border-color: linear-gradient(to right, #FD8893 100%, #E22A34 100%);
    }
  }
}
</style>